<template>
    <page-body>
        <view class="page">
            <view class="flex benben-position-layout flex flex-wrap align-center flex_0_higd" :style="{height:(88+StatusBarRpx)+'rpx',paddingTop:StatusBarRpx+'rpx', }">
                <view class='flex flex-wrap align-center justify-between flex-sub fd0_0_higd'>
                    <view class='flex flex-wrap align-center fd0_0_c0_higd' @tap.stop="handleJumpDiy" data-type="back" data-url="1">
                        <text class='fu-iconfont2  fd0_0_c0_c0_higd'>&#xE794;</text>
                    </view>
                    <view class='flex flex-wrap align-stretch justify-center'>
                        <text class='fd0_0_c1_c0_higd'>{{$t('练习结果')}}</text>
                    </view>
                    <view class='flex flex-wrap align-center justify-end fd0_0_c0_higd'>
                    </view>
                </view>

            </view>
            <view :style="{height: (88+StatusBarRpx)+'rpx'}"></view>
            <!---flex布局flex布局开始-->
            <view class="flex flex-direction align-stretch benben-flex-layout flex_1_higd">
                <view class='flex flex-direction align-stretch'>
                    <view class='flex flex-wrap align-center'>
                        <text class='fd1_0_c0_c0_higd'>{{info.title}}</text>
                    </view>
                    <view class='flex flex-wrap align-center fd1_0_c1_higd'>
                        <text class='fd1_0_c1_c0_higd'>提交时间：{{info.time}}</text>
                    </view>
                    <view class='flex flex-wrap align-center fd1_0_c2_higd'>
                        <text class='fd1_0_c1_c0_higd'>作答时长：{{info.use_time}}</text>
                    </view>
                </view>
                <view class='flex flex-wrap align-center fd1_1_higd'>
                </view>
                <view class='flex flex-direction align-stretch fd1_2_higd'>
                    <view class='flex flex-wrap align-center justify-center fd1_2_c0_higd'>
                        <benben-progress active-color="#D32A29" unit="%" :show-value='true' value-color="#333333" value-font-weight="700" value-font-size="72" inactive-color="#e5e5e5" bg-color="#ffffff" duration="600" width="420" borderWidth="18" :progress='info.answer_radio' />
                    </view>
                    <view class='flex flex-wrap align-center justify-around'>
                        <view class='flex flex-direction flex-wrap align-center justify-center'>
                            <text class='fd1_2_c1_c0_c0_higd'>{{info.correct_num}}</text>
                            <text class='fd1_2_c1_c0_c1_higd'>{{$t('答对题数')}}</text>
                        </view>
                        <view class='flex flex-direction flex-wrap align-center justify-center'>
                            <text class='fd1_2_c1_c0_c0_higd'>{{info.error_num}}</text>
                            <text class='fd1_2_c1_c0_c1_higd'>{{$t('答错题数')}}</text>
                        </view>
                        <view class='flex flex-direction flex-wrap align-center justify-center'>
                            <text class='fd1_2_c1_c0_c0_higd'>{{info.wd_num}}</text>
                            <text class='fd1_2_c1_c0_c1_higd'>{{$t('未作答数')}}</text>
                        </view>
                    </view>
                    <view class='flex flex-direction flex-wrap align-center justify-center fd1_2_c2_higd'>
                        <button class='fd1_2_c2_c0_higd' @tap.stop="handleJumpDiy"
						data-type="redirectTo" :data-url="`/pagexxzx/lxdetail/lxdetail?type=${type}&aid=${id}`">{{$t('重新练习')}}</button>
                        <button class='fd1_2_c2_c1_higd' @tap.stop="handleJumpDiy"
						data-type="redirectTo" :data-url="`/pagexxzx/xtjx/xtjx?type=${type}&id=${id}`">{{$t('答案解析')}}</button>
                    </view>
                </view>
            </view>

            <!---flex布局flex布局结束-->


        </view>
    </page-body>
</template>
<script>
    import {
        validate
    } from '@/common/utils/validate.js'

    export default {
        components: {},


        data() {
            return {
                "info": "",
                "type": "",
                "id": ""
            };
        },
        computed: {

        },
        watch: {},
        onLoad(options) {
            let {
                type,
                id
            } = options
            if (type !== undefined) this.type = type
            if (id !== undefined) this.id = id
			this.getinfoFunc()
        },
        onUnload() {

        },
        onReady() {

        },
        onShow() {

        },
        onHide() {

        },
        onResize() {

        },
        onPullDownRefresh() {

        },
        onReachBottom(e) {

        },
        onPageScroll(e) {

        },
        methods: {
            //查看答题结果
            async getinfoFunc() {
                if (this.type == '2') {
                    //请求方法
                    //数据验证

                    let data6864a0df9316b = await this.$api.post(global.apiUrls.post6864a0df9316b, {
                        userwrongquestion_id: this.id
                    });

                    if (data6864a0df9316b.data.code != 1) {
                        this.$message.info(data6864a0df9316b.data.msg);
                        return
                    }
                    this.info= data6864a0df9316b.data.data;


                } else {
                    //请求方法
                    //数据验证

                    let data6867963dcbe6d = await this.$api.post(global.apiUrls.post6867963dcbe6d, {
                        userpractice_id: this.id
                    });

                    if (data6867963dcbe6d.data.code != 1) {
                        this.$message.info(data6867963dcbe6d.data.msg);
                        return
                    }
                   this.info = data6867963dcbe6d.data.data;


                }
            }
        }
    };
</script>
<style lang="scss" scoped>
    .page {
        width: 100vw;
        overflow-x: hidden;
        min-height: calc(100vh - var(--window-bottom));
        background: #F8F8F8;
        background-size: 100% auto;

        .flex_1_higd {
            margin: 20rpx 0rpx 0rpx 0rpx;
            background: rgba(255, 255, 255, 1);
            background-size: 100% auto;
            padding: 32rpx 40rpx 32rpx 40rpx;

            .fd1_0_c0_c0_higd {
                color: #333;
                font-size: 32rpx;
                font-weight: 500;
            }

            .fd1_0_c1_higd {
                margin: 28rpx 0rpx 28rpx 0rpx;
            }

            .fd1_0_c2_higd {
                margin: 0rpx 0rpx 32rpx 0rpx;
            }

            .fd1_1_higd {
                background: #EEEEEE;
                width: 750rpx;
                height: 2rpx;
            }

            .fd1_2_higd {
                margin: 0rpx 0rpx 0rpx 0rpx;

                .fd1_2_c0_higd {
                    margin: 44rpx 0rpx 72rpx 0rpx;
                    position: relative;
                }

                .fd1_2_c2_higd {
                    margin: 70rpx 0rpx 0rpx 0rpx;

                    .fd1_2_c2_c0_higd {
                        border-radius: 49rpx;
                        width: 450rpx;
                        line-height: 98rpx;
                        font-size: 24rpx;
                        background: #D32A29;
                        color: #fff;
                        height: 98rpx;
                        margin: 0rpx 0rpx 28rpx 0rpx;
                    }

                    .fd1_2_c2_c1_higd {
                        border-radius: 49rpx;
                        width: 450rpx;
                        line-height: 98rpx;
                        font-size: 24rpx;
                        color: var(--benbenFontColor0);
                        height: 98rpx;
                        border: 1px solid #D32A29;
                        background: rgba(255, 255, 255, 1);
                        background-size: 100% auto;
                    }
                }
            }
        }

        .fd1_0_c1_c0_higd {
            font-size: 32rpx;
            color: rgba(102, 102, 102, 1);
        }

        .fd1_2_c1_c0_c0_higd {
            font-size: 48rpx;
            color: #333;
            font-weight: 700;
            margin: 0rpx 0rpx 24rpx 0rpx;
        }

        .fd1_2_c1_c0_c1_higd {
            font-size: 28rpx;
            color: rgba(102, 102, 102, 1);
        }

        .flex_0_higd {
            width: 750rpx;
            height: 88rpx;
            overflow: hidden;
            z-index: 10;
            top: 0rpx;
            background: #fff;
            background-size: 100% auto !important;

            .fd0_0_higd {
                padding: 0rpx 32rpx 0rpx 32rpx;

                .fd0_0_c1_c0_higd {
                    font-size: 36rpx;
                    font-weight: 700;
                    color: #333333;
                    line-height: 50rpx;
                }
            }
        }

        .fd0_0_c0_higd {
            width: 120rpx;

            .fd0_0_c0_c0_higd {
                font-size: 36rpx;
                color: #333;
            }
        }
    }
</style>